<template>
  <div class="container">
    <a-card class="general-card" title="查询条件">
      <a-row :gutter="16">
        <a-col :span="4">
          <a-select
            v-model="searchModel.datasourceId"
            placeholder="请选择数据源"
            :options="datasources"
            :field-names="{
              value: 'id',
              label: 'name',
            }"
          />
        </a-col>
        <a-col :span="4">
          <a-button type="primary" @click="configDatasource">
            <template #icon><icon-settings /></template>
            数据源配置
          </a-button>
        </a-col>
        <a-col :span="4">
          <a-input v-model="searchModel.tableName" placeholder="请输入表名" />
        </a-col>
        <a-col :span="2" style="text-align: right">
          <a-space :size="18">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              查询
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-refresh />
              </template>
              重置
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 10" />
      <a-table
        row-key="id"
        :loading="loading"
        :data="renderData"
        :columns="columns"
        :bordered="{ wrapper: true, cell: true }"
      >
        <template #operations="{ record }">
          <a-button type="text" size="small" @click="gen(record)">
            <template #icon>
              <icon-settings />
            </template>
            生成代码
          </a-button>
        </template>
      </a-table>
    </a-card>
    <ds-list v-model:visible="dsDialogVisible" />
    <gen-form v-model:visible="genDialogVisible" :form-data="formData" />
  </div>
</template>

<script setup lang="ts">
  import { pickBy } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import { computed, ref } from 'vue';
  import { useRequest } from 'vue-request';
  import { datasourceList, tableList } from '@/api/upms/gen';
  import DsList from './components/ds-list.vue';
  import GenForm from './components/gen-form.vue';

  // 初始数据
  const generateModel = () => {
    return {
      datasourceId: '',
      tableName: '',
    };
  };

  const searchModel = ref(generateModel());

  const reset = () => {
    searchModel.value = generateModel();
  };

  const dsDialogVisible = ref(false);

  const genDialogVisible = ref(false);

  const configDatasource = () => {
    dsDialogVisible.value = true;
  };

  const columns = [
    { title: '表名', dataIndex: 'tableName' },
    { title: '数据库名称', dataIndex: 'tableSchema' },
    { title: '描述', dataIndex: 'tableComment' },
    { title: '创建时间', dataIndex: 'createTime' },
    { title: '操作', slotName: 'operations' },
  ];

  const { data, loading, refresh } = useRequest(
    () => tableList({ ...pickBy(searchModel.value) }),
    { manual: true }
  );

  const { data: datasources } = useRequest(datasourceList);

  const renderData = computed(() => data.value || []);

  const formData = ref();

  const search = () => {
    if (!searchModel.value.datasourceId) {
      Message.warning('请选择数据源');
    } else {
      refresh();
    }
  };

  const gen = (row: any) => {
    genDialogVisible.value = true;
    formData.value = row;
    formData.value.datasourceId = searchModel.value.datasourceId;
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0px 10px 0px 10px;
  }
</style>
